{{define "content"}}
<div x-data="partnersManager()" x-init="init()" @keydown.window="handleKeydown($event)">

    <!-- Page Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">合作机构管理</h1>
            <p class="mt-1 text-sm text-gray-500">管理合作机构信息，配置推送规则和业务合作</p>
            <div class="mt-2 flex items-center space-x-4 text-xs text-gray-400">
                <span><kbd class="px-1 py-0.5 bg-gray-100 rounded text-gray-600">Ctrl+K</kbd> 搜索</span>
                <span><kbd class="px-1 py-0.5 bg-gray-100 rounded text-gray-600">Ctrl+N</kbd> 新建</span>
                <span><kbd class="px-1 py-0.5 bg-gray-100 rounded text-gray-600">ESC</kbd> 关闭</span>
            </div>
        </div>
        <div class="mt-4 sm:mt-0 flex space-x-3">
            <button @click="refreshData()" 
                    :disabled="loading"
                    class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50">
                <svg class="w-4 h-4 mr-2" :class="loading ? 'animate-spin' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                </svg>
                刷新数据
            </button>
            <button @click="exportPartners()" 
                    class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                </svg>
                导出数据
            </button>
            {{if hasPermission .user.Permissions "partner.create"}}
            <a href="/partners/new" 
               class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                </svg>
                添加机构
            </a>
            {{end}}
        </div>
    </div>
    
    <!-- 搜索和操作栏 -->
    <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
        <div class="flex flex-col space-y-4">
            <!-- 第一行：搜索框和基本筛选 -->
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-4 sm:space-y-0">
                <div class="flex-1 flex items-center space-x-4">
                    <!-- 搜索框 -->
                    <div class="flex-1 max-w-md">
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                                </svg>
                            </div>
                            <input type="text" 
                                   x-model="searchQuery" 
                                   @input.debounce.300ms="search()" 
                                   placeholder="搜索机构名称、城市、联系人..." 
                                   class="block w-full pl-10 pr-10 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            <!-- 清除搜索按钮 -->
                            <button x-show="searchQuery" 
                                    @click="searchQuery = ''; search()" 
                                    class="absolute inset-y-0 right-0 pr-3 flex items-center">
                                <svg class="w-4 h-4 text-gray-400 hover:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                </svg>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 状态筛选 -->
                    <select x-model="statusFilter" @change="search()" class="border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500">
                        <option value="">全部状态</option>
                        <option value="active">活跃</option>
                        <option value="inactive">停用</option>
                    </select>
                    
                    <!-- 城市筛选 -->
                    <select x-model="cityFilter" @change="search()" class="border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500">
                        <option value="">全部城市</option>
                        <template x-for="city in cities" :key="city">
                            <option :value="city" x-text="city"></option>
                        </template>
                    </select>
                </div>
                
                <!-- 高级筛选切换 -->
                <button @click="showAdvancedFilter = !showAdvancedFilter" 
                        class="inline-flex items-center px-3 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"></path>
                    </svg>
                    高级筛选
                    <svg class="w-4 h-4 ml-2 transition-transform" :class="showAdvancedFilter ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                    </svg>
                </button>
            </div>
            
            <!-- 第二行：高级筛选选项 -->
            <div x-show="showAdvancedFilter" x-collapse class="border-t pt-4">
                <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
                    <!-- 学科筛选 -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">业务学科</label>
                        <select x-model="subjectFilter" @change="search()" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500">
                            <option value="">全部学科</option>
                            <template x-for="subject in commonSubjects" :key="subject">
                                <option :value="subject" x-text="subject"></option>
                            </template>
                        </select>
                    </div>
                    
                    <!-- 创建时间筛选 -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">创建时间</label>
                        <select x-model="dateFilter" @change="search()" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500">
                            <option value="">全部时间</option>
                            <option value="today">今天</option>
                            <option value="week">本周</option>
                            <option value="month">本月</option>
                            <option value="quarter">本季度</option>
                        </select>
                    </div>
                    
                    <!-- 推送成功率筛选 -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">推送成功率</label>
                        <select x-model="successRateFilter" @change="search()" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500">
                            <option value="">全部</option>
                            <option value="high">≥80%</option>
                            <option value="medium">60%-79%</option>
                            <option value="low"><60%</option>
                        </select>
                    </div>
                    
                    <!-- 重置筛选 -->
                    <div class="flex items-end">
                        <button @click="resetFilters()" 
                                class="w-full px-3 py-2 text-sm font-medium text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"></path>
                            </svg>
                            重置筛选
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
        <!-- Total Partners -->
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-8 h-8 bg-blue-500 rounded-md flex items-center justify-center">
                            <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                            </svg>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">总机构数</dt>
                            <dd class="text-lg font-medium text-gray-900" x-text="stats.total_partners || '0'"></dd>
                        </dl>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 px-5 py-3">
                <div class="text-sm">
                    <span class="text-blue-600 font-medium">全部</span>
                    <span class="text-gray-500">合作机构</span>
                </div>
            </div>
        </div>

        <!-- Active Partners -->
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-8 h-8 bg-green-500 rounded-md flex items-center justify-center">
                            <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                            </svg>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">活跃机构</dt>
                            <dd class="text-lg font-medium text-gray-900" x-text="stats.active_partners || '0'"></dd>
                        </dl>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 px-5 py-3">
                <div class="text-sm">
                    <span class="text-green-600 font-medium" x-text="stats.total_partners > 0 ? Math.round((stats.active_partners / stats.total_partners) * 100) + '%' : '0%'"></span>
                    <span class="text-gray-500">活跃率</span>
                </div>
            </div>
        </div>

        <!-- Inactive Partners -->
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-8 h-8 bg-red-500 rounded-md flex items-center justify-center">
                            <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
                            </svg>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">停用机构</dt>
                            <dd class="text-lg font-medium text-gray-900" x-text="stats.inactive_partners || '0'"></dd>
                        </dl>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 px-5 py-3">
                <div class="text-sm">
                    <span class="text-red-600 font-medium">暂停</span>
                    <span class="text-gray-500">合作</span>
                </div>
            </div>
        </div>

        <!-- This Month Cooperation -->
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-8 h-8 bg-purple-500 rounded-md flex items-center justify-center">
                            <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
                            </svg>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">本月推送</dt>
                            <dd class="text-lg font-medium text-gray-900" x-text="stats.this_month_pushes || '0'"></dd>
                        </dl>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 px-5 py-3">
                <div class="text-sm">
                    <span class="text-purple-600 font-medium">+15%</span>
                    <span class="text-gray-500">较上月</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Partners List -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-lg font-medium text-gray-900">机构列表</h3>
                    <p class="text-sm text-gray-500">管理和查看所有合作机构信息 · 共 <span x-text="stats.total_partners || '0'"></span> 个机构</p>
                </div>
                <div class="flex items-center space-x-3">
                    <!-- 视图切换 -->
                    <div class="flex items-center bg-gray-100 rounded-lg p-1">
                        <button @click="viewMode = 'table'" 
                                :class="viewMode === 'table' ? 'bg-white shadow-sm text-gray-900' : 'text-gray-600'" 
                                class="px-3 py-1 text-sm font-medium rounded-md transition-colors">
                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
                            </svg>
                            表格
                        </button>
                        <button @click="viewMode = 'card'" 
                                :class="viewMode === 'card' ? 'bg-white shadow-sm text-gray-900' : 'text-gray-600'" 
                                class="px-3 py-1 text-sm font-medium rounded-md transition-colors">
                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
                            </svg>
                            卡片
                        </button>
                    </div> 
       
                </div>
            </div>
        </div>
        
        <!-- 加载状态 -->
        <div x-show="loading" class="flex items-center justify-center py-12">
            <div class="flex items-center space-x-2 text-gray-500">
                <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
                <span>加载中...</span>
            </div>
        </div>
        
        <!-- 空状态 -->
        <div x-show="!loading && partners.length === 0" class="text-center py-12">
            <div class="mx-auto h-24 w-24 text-gray-400">
                <svg class="w-24 h-24 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                </svg>
            </div>
            <h3 class="mt-4 text-lg font-medium text-gray-900">暂无合作机构</h3>
            <p class="mt-2 text-sm text-gray-500">开始添加您的第一个合作机构</p>
            <div class="mt-6">
                <button @click="openCreateModal()" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                    </svg>
                    添加机构
                </button>
            </div>
        </div>
        
        <!-- 表格视图 -->
        <div x-show="viewMode === 'table' && !loading && partners.length > 0" class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">机构信息</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">联系信息</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">业务范围</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">合作统计</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    <template x-for="partner in partners" :key="partner.id">
                        <tr class="hover:bg-gray-50 transition-colors duration-150">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 h-12 w-12">
                                        <div class="h-12 w-12 rounded-lg bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center text-white font-bold text-lg" 
                                             x-text="partner.name.charAt(0)"></div>
                                    </div>
                                    <div class="ml-4">
                                        <div class="text-sm font-medium text-gray-900" x-text="partner.name"></div>
                                        <div class="text-xs text-gray-500" x-text="partner.description ? (partner.description.length > 50 ? partner.description.substring(0, 50) + '...' : partner.description) : ''"></div>
                                        <div class="text-xs text-gray-500 mt-1" x-text="'NO: ' + partner.id"></div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="space-y-1">
                                    <div class="text-sm text-gray-900 flex items-center">
                                        <svg class="w-4 h-4 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                                        </svg>
                                        <span x-text="partner.contact"></span>
                                    </div>
                                    <div class="text-sm text-gray-500 flex items-center">
                                        <svg class="w-4 h-4 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                                        </svg>
                                        <span x-text="partner.phone"></span>
                                    </div>
                                    <div class="text-sm text-gray-500 flex items-center" x-show="partner.email">
                                        <svg class="w-4 h-4 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                                        </svg>
                                        <span x-text="partner.email"></span>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                <div class="space-y-2">
                                  
                                    <div class="text-sm text-gray-900">
                                        <span x-text="partner.subjects || ''"></span>
                                    </div>
                                    <div class="text-sm text-gray-500 flex items-center">
                                            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                            </svg>
                                            <span x-text="partner.city"></span>
                                        </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="space-y-1">
                                    <div class="flex items-center text-sm">
                                        <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
                                        <span class="text-gray-600">推送：</span>
                                        <span class="font-medium ml-1" x-text="partner.push_count || 0"></span>
                                    </div>
                                    <div class="flex items-center text-sm">
                                        <div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div>
                                        <span class="text-gray-600">成功：</span>
                                        <span class="font-medium ml-1" x-text="partner.success_count || 0"></span>
                                    </div>
                                    <div class="flex items-center text-sm">
                                        <div class="w-2 h-2 bg-purple-500 rounded-full mr-2"></div>
                                        <span class="text-gray-600">成功率：</span>
                                        <span class="font-medium ml-1" :class="(partner.push_count > 0 ? ((partner.success_count / partner.push_count) * 100) : 0) >= 80 ? 'text-green-600' : (partner.push_count > 0 ? ((partner.success_count / partner.push_count) * 100) : 0) >= 60 ? 'text-yellow-600' : 'text-red-600'" 
                                              x-text="partner.push_count > 0 ? ((partner.success_count / partner.push_count) * 100).toFixed(1) + '%' : '0%'"></span>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex flex-col space-y-2">
                                    <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full" 
                                          :class="partner.status === 'active' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'">
                                        <svg :class="partner.status === 'active' ? 'w-3 h-3 mr-1' : 'w-3 h-3 mr-1'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path x-show="partner.status === 'active'" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                            <path x-show="partner.status !== 'active'" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                        </svg>
                                        <span x-text="partner.status === 'active' ? '活跃' : '停用'"></span>
                                    </span>
                                    <div class="text-xs text-gray-500" x-text="'创建于 ' + formatDate(partner.created_at)"></div>
                                    <div class="text-xs text-gray-500" x-text="'更新于 ' + formatDate(partner.updated_at)"></div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <div class="flex flex-col space-y-1">
                                    <!-- 主要操作 -->
                                    <div class="flex space-x-1">
                                        <button @click="viewPartner(partner)" 
                                                class="inline-flex items-center px-2 py-1 text-xs font-medium rounded text-blue-600 hover:text-blue-900 hover:bg-blue-50" 
                                                title="查看详情">
                                            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                                            </svg>
                                            查看
                                        </button> 
                                
                                        
                                        {{if hasPermission .user.Permissions "partner.update"}}
                                        <button @click="editPartner(partner)" 
                                                class="inline-flex items-center px-2 py-1 text-xs font-medium rounded text-green-600 hover:text-green-900 hover:bg-green-50" 
                                                title="编辑机构">
                                            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                                            </svg>
                                            编辑
                                        </button>
                                        {{else}}
                                        <div class="text-xs text-red-500">无编辑权限</div>
                                        {{end}}
                                    </div>
                                    
                                    <!-- 次要操作 -->
                                    <div class="flex space-x-1">
                                        {{if hasPermission .user.Permissions "push.manual"}}
                                        <button @click="pushToPartner(partner)" 
                                                class="inline-flex items-center px-2 py-1 text-xs font-medium rounded text-purple-600 hover:text-purple-900 hover:bg-purple-50" 
                                                title="推送客户">
                                            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
                                            </svg>
                                            推送
                                        </button>
                                        {{end}}
                                        
                                        {{if hasPermission .user.Permissions "partner.update"}}
                                        <button @click="toggleStatus(partner)" 
                                                :class="partner.status === 'active' ? 'text-yellow-600 hover:text-yellow-900 hover:bg-yellow-50' : 'text-green-600 hover:text-green-900 hover:bg-green-50'" 
                                                class="inline-flex items-center px-2 py-1 text-xs font-medium rounded"
                                                :title="partner.status === 'active' ? '停用机构' : '启用机构'">
                                            <svg :class="partner.status === 'active' ? 'w-3 h-3 mr-1' : 'w-3 h-3 mr-1'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path x-show="partner.status === 'active'" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                                <path x-show="partner.status !== 'active'" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-6 4h.01M15 14h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                            </svg>
                                            <span x-text="partner.status === 'active' ? '停用' : '启用'"></span>
                                        </button>
                                        {{end}}
                                    </div>
                                    
                                    <!-- 危险操作 -->
                                    {{if hasPermission .user.Permissions "partner.delete"}}
                                    <button @click="deletePartner(partner)" 
                                            class="inline-flex items-center px-2 py-1 text-xs font-medium rounded text-red-600 hover:text-red-900 hover:bg-red-50" 
                                            title="删除机构">
                                        <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                                        </svg>
                                        删除
                                    </button>
                                    {{end}}
                                </div>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
        
        <!-- 卡片视图 -->
        <div x-show="viewMode === 'card' && !loading && partners.length > 0" class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                <template x-for="partner in partners" :key="partner.id">
                    <div class="bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200">
                        <!-- 卡片头部 -->
                        <div class="p-4 border-b border-gray-100">
                            <div class="flex items-center space-x-3">
                                <div class="flex-shrink-0">
                                    <div class="h-10 w-10 rounded-lg bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center text-white font-bold" 
                                         x-text="partner.name.charAt(0)"></div>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <h4 class="text-sm font-medium text-gray-900 truncate" x-text="partner.name"></h4>
                                    <p class="text-xs text-gray-500 flex items-center">
                                        <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                        </svg>
                                        <span x-text="partner.city"></span>
                                    </p>
                                </div>
                                <div class="flex-shrink-0">
                                    <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full" 
                                          :class="partner.status === 'active' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'">
                                        <span x-text="partner.status === 'active' ? '活跃' : '停用'"></span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 卡片内容 -->
                        <div class="p-4 space-y-3">
                            <!-- 联系信息 -->
                            <div class="space-y-2">
                                <div class="text-xs text-gray-500 font-medium uppercase tracking-wide">联系信息</div>
                                <div class="space-y-1">
                                    <div class="text-sm text-gray-900 flex items-center">
                                        <svg class="w-3 h-3 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                                        </svg>
                                        <span x-text="partner.contact" class="truncate"></span>
                                    </div>
                                    <div class="text-sm text-gray-600 flex items-center">
                                        <svg class="w-3 h-3 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                                        </svg>
                                        <span x-text="partner.phone" class="truncate"></span>
                                    </div>
                                    <div x-show="partner.email" class="text-sm text-gray-600 flex items-center">
                                        <svg class="w-3 h-3 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                                        </svg>
                                        <span x-text="partner.email" class="truncate"></span>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 业务信息 -->
                            <div class="space-y-2">
                                <div class="text-xs text-gray-500 font-medium uppercase tracking-wide">业务范围</div>
                                <div class="text-xs text-gray-500" x-text="partner.description ? (partner.description.length > 30 ? partner.description.substring(0, 30) + '...' : partner.description) : ''"></div>
                                <div class="text-sm text-gray-900">
                                    <span x-text="partner.subjects || ''"></span>
                                </div>
                            </div>
                            
                            <!-- 统计信息 -->
                            <div class="grid grid-cols-2 gap-3 pt-2 border-t border-gray-100">
                                <div class="text-center">
                                    <div class="text-lg font-semibold text-gray-900" x-text="partner.total_pushes || '0'"></div>
                                    <div class="text-xs text-gray-500">总推送</div>
                                </div>
                                <div class="text-center">
                                    <div class="text-lg font-semibold text-green-600" x-text="partner.success_rate || '0%'"></div>
                                    <div class="text-xs text-gray-500">成功率</div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 卡片操作 -->
                        <div class="px-4 py-3 bg-gray-50 border-t border-gray-100 rounded-b-lg">
                            <div class="flex items-center justify-between">
                                <div class="flex space-x-2">
                                    <button @click="viewPartner(partner)" 
                                            class="inline-flex items-center px-2 py-1 text-xs font-medium rounded text-blue-600 hover:text-blue-900 hover:bg-blue-100" 
                                            title="查看详情">
                                        <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                                        </svg>
                                        查看
                                    </button>
                                    {{if hasPermission .user.Permissions "partner.update"}}
                                    <button @click="editPartner(partner)" 
                                            class="inline-flex items-center px-2 py-1 text-xs font-medium rounded text-green-600 hover:text-green-900 hover:bg-green-100" 
                                            title="编辑机构">
                                        <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                                        </svg>
                                        编辑
                                    </button>
                                    {{end}}
                                </div>
                                <div class="flex space-x-1">
                                    {{if hasPermission .user.Permissions "push.manual"}}
                                    <button @click="pushToPartner(partner)" 
                                            class="inline-flex items-center px-2 py-1 text-xs font-medium rounded text-purple-600 hover:text-purple-900 hover:bg-purple-100" 
                                            title="推送客户">
                                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
                                        </svg>
                                    </button>
                                    {{end}}
                                    {{if hasPermission .user.Permissions "partner.update"}}
                                    <button @click="toggleStatus(partner)" 
                                            :class="partner.status === 'active' ? 'text-yellow-600 hover:text-yellow-900 hover:bg-yellow-100' : 'text-green-600 hover:text-green-900 hover:bg-green-100'" 
                                            class="inline-flex items-center px-2 py-1 text-xs font-medium rounded"
                                            :title="partner.status === 'active' ? '停用机构' : '启用机构'">
                                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path x-show="partner.status === 'active'" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                            <path x-show="partner.status !== 'active'" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-6 4h.01M15 14h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                        </svg>
                                    </button>
                                    {{end}}
                                    {{if hasPermission .user.Permissions "partner.delete"}}
                                    <button @click="deletePartner(partner)" 
                                            class="inline-flex items-center px-2 py-1 text-xs font-medium rounded text-red-600 hover:text-red-900 hover:bg-red-100" 
                                            title="删除机构">
                                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                                        </svg>
                                    </button>
                                    {{end}}
                                </div>
                            </div>
                            <div class="mt-2 space-y-1">
                                <div class="text-xs text-gray-400 text-center" x-text="'NO: ' + partner.id"></div>
                                <div class="text-xs text-gray-400 text-center" x-text="'创建于 ' + formatDate(partner.created_at)"></div>
                                <div class="text-xs text-gray-400 text-center" x-text="'更新于 ' + formatDate(partner.updated_at)"></div>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
        
        <!-- 分页 -->
        <div class="bg-white px-4 py-3 border-t border-gray-200 sm:px-6">
            <div class="flex items-center justify-between">
                <div class="flex-1 flex justify-between sm:hidden">
                    <button @click="prevPage()" :disabled="page <= 1" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50">
                        上一页
                    </button>
                    <button @click="nextPage()" :disabled="page >= totalPages" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50">
                        下一页
                    </button>
                </div>
                <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                    <div>
                        <p class="text-sm text-gray-700">
                            显示第 <span class="font-medium" x-text="(page - 1) * limit + 1"></span> 到 
                            <span class="font-medium" x-text="Math.min(page * limit, total)"></span> 个，
                            共 <span class="font-medium" x-text="total"></span> 个机构
                        </p>
                    </div>
                    <div>
                        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                            <button @click="prevPage()" :disabled="page <= 1" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                                </svg>
                            </button>
                            <template x-for="pageNum in getPageNumbers()" :key="pageNum">
                                <button @click="goToPage(pageNum)" 
                                        :class="pageNum === page ? 'bg-blue-50 border-blue-500 text-blue-600' : 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50'"
                                        class="relative inline-flex items-center px-4 py-2 border text-sm font-medium" 
                                        x-text="pageNum"></button>
                            </template>
                            <button @click="nextPage()" :disabled="page >= totalPages" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                                </svg>
                            </button>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 取消编辑确认对话框 -->
    <div x-show="showCancelDialog" 
         class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0">
        <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6" 
             @click.away="showCancelDialog = false"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0 transform scale-95"
             x-transition:enter-end="opacity-100 transform scale-100">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-medium text-gray-900">确认关闭编辑？</h3>
                <button @click="showCancelDialog = false" class="text-gray-400 hover:text-gray-500">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                    </svg>
                </button>
            </div>
            <div class="mb-6">
                <p class="text-gray-600 mb-2">您有未保存的更改，确定要关闭吗？</p>
                <p class="text-sm text-gray-500">关闭编辑将丢失当前未保存的内容。</p>
            </div>
            <div class="flex justify-end space-x-3">
                <button @click="showCancelDialog = false" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
                    继续编辑
                </button>
                <button @click="confirmLeave()" class="px-4 py-2 text-sm font-medium text-white bg-red-600 border border-transparent rounded-md hover:bg-red-700">
                    确认关闭
                </button>
            </div>
        </div>
    </div>

    <!-- 创建/编辑机构模态框 -->
    <div x-show="showCreateModal || showEditModal" x-cloak class="fixed inset-0 z-50 overflow-y-auto">
        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" @click="handleCancel()"></div>
            
            <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-6xl sm:w-full">
                <form @submit.prevent="savePartner()">
                    <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                        <div class="mb-6">
                            <div class="flex items-center justify-between">
                                <div>
                                    <h3 class="text-lg font-medium text-gray-900" x-text="showCreateModal ? '添加合作机构' : '编辑合作机构'"></h3>
                                    <p class="text-sm text-gray-500">完善机构信息，建立合作关系</p>
                                </div>
                                <button type="button" @click="handleCancel()" class="text-gray-400 hover:text-gray-600">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                    </svg>
                                </button>
                            </div>
                             
                   
                            
                            <!-- 进度指示器 -->
                            <div class="mt-4">
                                <div class="flex items-center space-x-4 text-sm">
                                    <div class="flex items-center text-blue-600">
                                        <div class="w-6 h-6 bg-blue-600 rounded-full flex items-center justify-center text-white text-xs font-medium mr-2">1</div>
                                        基本信息
                                    </div>
                                    <div class="flex-1 h-px bg-gray-200"></div>
                                    <div class="flex items-center text-gray-400">
                                        <div class="w-6 h-6 bg-gray-200 rounded-full flex items-center justify-center text-gray-600 text-xs font-medium mr-2">2</div>
                                        联系方式
                                    </div>
                                    <div class="flex-1 h-px bg-gray-200"></div>
                                    <div class="flex items-center text-gray-400">
                                        <div class="w-6 h-6 bg-gray-200 rounded-full flex items-center justify-center text-gray-600 text-xs font-medium mr-2">3</div>
                                        业务配置
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                            <!-- 基本信息 -->
                            <div class="lg:col-span-2">
                                <h4 class="text-md font-medium text-gray-900 mb-4 flex items-center">
                                    <svg class="w-4 h-4 text-blue-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                                    </svg>
                                    基本信息
                                </h4>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <!-- 机构名称 -->
                                    <div class="md:col-span-2">
                                        <label class="block text-sm font-medium text-gray-700 mb-1">
                                            机构名称 <span class="text-red-500">*</span>
                                        </label>
                                        <input type="text" 
                                           x-model="partnerForm.form.name" 
                                               @input="saveDraft()"
                                               required 
                                               placeholder="请输入机构名称"
                                               :class="!partnerForm.form.name || partnerForm.form.name.trim() === '' ? 'border-red-300 focus:ring-red-500 focus:border-red-500' : 'border-gray-300 focus:ring-blue-500 focus:border-blue-500'"
                                               class="w-full border rounded-lg px-3 py-2 focus:ring-2">
                                        <p class="mt-1 text-xs" :class="!partnerForm.form.name || partnerForm.form.name.trim() === '' ? 'text-red-500' : 'text-gray-500'">
                                        <span x-show="!partnerForm.form.name || partnerForm.form.name.trim() === ''">请输入机构名称</span>
                                        <span x-show="partnerForm.form.name && partnerForm.form.name.trim() !== ''">机构的正式名称，将用于推送和合作标识</span>
                                        </p>
                                    </div>

                                    <!-- 所在城市 -->
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">
                                            所在城市 <span class="text-red-500">*</span>
                                        </label>
                                        <input type="text" 
                                           x-model="partnerForm.form.city" 
                                               @input="saveDraft()"
                                               required 
                                               placeholder="请输入城市名称"
                                               class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                    </div>

                                    <!-- 机构状态 -->
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">机构状态</label>
                                        <select x-model="partnerForm.form.status" 
                                                @change="saveDraft()"
                                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                            <option value="active">活跃</option>
                                            <option value="inactive">停用</option>
                                        </select>
                                    </div>

                                    <!-- 机构描述 -->
                                    <div class="md:col-span-2">
                                        <label class="block text-sm font-medium text-gray-700 mb-1">机构描述</label>
                                        <textarea x-model="partnerForm.form.description" 
                                                  @input="saveDraft()"
                                                  rows="3" 
                                                  placeholder="请简要描述机构的业务特色、优势等"
                                                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
                                    </div>
                                </div>
                            </div>

                            <!-- 联系信息 -->
                            <div class="lg:col-span-2">
                                <h4 class="text-md font-medium text-gray-900 mb-4 flex items-center">
                                    <svg class="w-4 h-4 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
                                    </svg>
                                    联系信息
                                </h4>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <!-- 联系人 -->
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">
                                            联系人
                                        </label>
                                        <input type="text" 
                                           x-model="partnerForm.form.contact_person" 
                                               @input="saveDraft()"
                                               placeholder="请输入联系人姓名"
                                               class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                    </div>

                                    <!-- 联系电话 -->
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">
                                            联系电话
                                        </label>
                                        <input type="tel" 
                                           x-model="partnerForm.form.phone" 
                                               @input="saveDraft()"
                                               placeholder="请输入联系电话"
                                               class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                    </div>

                                    <!-- 联系邮箱 -->
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">联系邮箱</label>
                                        <input type="email" 
                                           x-model="partnerForm.form.email" 
                                               @input="saveDraft()"
                                               placeholder="请输入联系邮箱"
                                               class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                    </div>

                                    <!-- Webhook URL -->
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">Webhook URL</label>
                                        <input type="url" 
                                           x-model="partnerForm.form.webhook_url" 
                                               @input="saveDraft()"
                                               placeholder="https://example.com/webhook"
                                               class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                        <p class="mt-1 text-xs text-gray-500">用于接收客户推送数据的接口地址</p>
                                    </div>
                                </div>
                            </div>

                            <!-- 业务配置 -->
                            <div class="lg:col-span-2">
                                <h4 class="text-md font-medium text-gray-900 mb-4 flex items-center">
                                    <svg class="w-5 h-5 text-purple-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                    </svg>
                                    业务配置
                                </h4>
                                
                                <!-- 城市校区 -->
                                <div class="mb-6">
                                    <label class="block text-sm font-medium text-gray-700 mb-2">城市校区</label>
                                    <textarea x-model="partnerForm.form.cities" 
                                              rows="4" 
                                              placeholder="请输入机构支持的城市校区，每行一个或用逗号分隔"
                                              :class="partnerForm.errors.cities ? 'border-red-500 focus:ring-red-500 focus:border-red-500' : 'border-gray-300 focus:ring-blue-500 focus:border-blue-500'"
                                              class="w-full border rounded-lg px-3 py-2 focus:ring-2 transition-colors"></textarea>
                                    <p x-show="partnerForm.errors.cities" x-text="partnerForm.errors.cities" class="mt-2 text-sm text-red-600"></p>
                                    <p class="mt-2 text-xs text-gray-500">
                                        <svg class="w-3 h-3 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                        </svg>
                                        输入该机构可以接收客户的校区范围，支持多行输入或逗号分隔
                                    </p>
                                    <!-- 城市校区案例 -->
                                    <div class="mt-3 p-3 bg-gray-50 rounded-lg border border-gray-200">
                                        <h5 class="text-sm font-medium text-gray-700 mb-2 flex items-center">
                                            <svg class="w-4 h-4 text-blue-500 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
                                            </svg>
                                            录入案例参考
                                        </h5>
                                        <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-xs">
                                            <div>
                                                <p class="font-medium text-gray-600 mb-1">🏢 新东方上海校区：</p>
                                                <p class="text-gray-500 font-mono bg-white px-2 py-1 rounded border">上海徐汇区,上海黄浦区,上海静安区,上海长宁区,上海普陀区,上海虹口区,上海杨浦区,上海浦东新区</p>
                                            </div>
                                            <div>
                                                <p class="font-medium text-gray-600 mb-1">🏢 新东方北京校区：</p>
                                                <p class="text-gray-500 font-mono bg-white px-2 py-1 rounded border">北京海淀区,北京朝阳区,北京西城区,北京东城区,北京丰台区</p>
                                            </div>
                                            <div>
                                                <p class="font-medium text-gray-600 mb-1">🏢 新东方广州校区：</p>
                                                <p class="text-gray-500 font-mono bg-white px-2 py-1 rounded border">广州天河区,广州越秀区,广州海珠区,广州荔湾区,广州白云区,广州黄埔区,广州番禺区</p>
                                            </div>
                                            <div>
                                                <p class="font-medium text-gray-600 mb-1">🏢 新东方深圳校区：</p>
                                                <p class="text-gray-500 font-mono bg-white px-2 py-1 rounded border">深圳福田区,深圳罗湖区,深圳南山区,深圳宝安区,深圳龙岗区,深圳龙华区</p>
                                            </div>
                                        </div>
                                        <div class="mt-2 pt-2 border-t border-gray-200">
                                            <p class="text-xs text-gray-500">
                                                <span class="font-medium">💡 录入建议：</span>
                                                可以按照"城市+区域"的格式录入，用逗号分隔多个校区，便于系统进行精准匹配和客户推送
                                            </p>
                                        </div>
                                    </div>
                                </div>



                                <!-- 接收学科 -->
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">接收学科</label>
                                    <textarea x-model="partnerForm.form.subjects" 
                                              rows="4" 
                                              placeholder="请输入机构接收的学科，每行一个或用逗号分隔"
                                              :class="partnerForm.errors.subjects ? 'border-red-500 focus:ring-red-500 focus:border-red-500' : 'border-gray-300 focus:ring-blue-500 focus:border-blue-500'"
                                              class="w-full border rounded-lg px-3 py-2 focus:ring-2 transition-colors"></textarea>
                                    <p x-show="partnerForm.errors.subjects" x-text="partnerForm.errors.subjects" class="mt-2 text-sm text-red-600"></p>
                                    <p class="mt-2 text-xs text-gray-500">
                                        <svg class="w-3 h-3 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                        </svg>
                                        输入该机构可以接收的学科范围，支持多行输入或逗号分隔
                                    </p>
                                    
                                    <!-- 接收学科案例 -->
                                    <div class="mt-3 p-4 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-lg border border-blue-200">
                                        <h5 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                                            <svg class="w-4 h-4 text-blue-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
                                            </svg>
                                            录入案例参考
                                        </h5>
                                        
                                        <!-- 机构示例切换标签 -->
                                        <div class="mb-4" x-data="{ activeTab: 'xdf' }">
                                            <!-- 标签页导航 -->
                                            <div class="flex border-b border-gray-200 mb-3">
                                                <button type="button" @click="activeTab = 'xdf'" 
                                                        :class="activeTab === 'xdf' ? 'border-blue-500 text-blue-600 bg-blue-50' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                                                        class="px-4 py-2 text-xs font-medium border-b-2 transition-colors duration-200">
                                                    <span class="flex items-center">
                                                        <span class="w-2 h-2 bg-blue-500 rounded-full mr-2"></span>
                                                        新东方示例
                                                    </span>
                                                </button>
                                                <button type="button" @click="activeTab = 'xueda'" 
                                                        :class="activeTab === 'xueda' ? 'border-green-500 text-green-600 bg-green-50' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                                                        class="px-4 py-2 text-xs font-medium border-b-2 transition-colors duration-200 ml-2">
                                                    <span class="flex items-center">
                                                        <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
                                                        学大教育示例
                                                    </span>
                                                </button>
                                            </div>
                                            
                                            <!-- 新东方培训学科示例 -->
                                            <div x-show="activeTab === 'xdf'" 
                                                 x-transition:enter="transition ease-out duration-200"
                                                 x-transition:enter-start="opacity-0 transform translate-y-2"
                                                 x-transition:enter-end="opacity-100 transform translate-y-0"
                                                 class="p-3 bg-white rounded-lg border border-gray-200 shadow-sm">
                                                <div class="flex items-center justify-between mb-2">
                                                    <div class="flex items-center">
                                                        <span class="text-xs font-medium text-blue-600 bg-blue-100 px-2 py-1 rounded-full mr-2">新东方示例</span>
                                                        <span class="text-xs text-gray-500">语言培训为主</span>
                                                    </div>
                                                    <button type="button" @click="insertBatchSubjects(['英语','托福','雅思','SAT','GRE','GMAT','考研英语','四六级','少儿英语','中学英语','小学英语','语文','数学','物理','化学','生物'])" 
                                                            class="text-xs bg-blue-500 hover:bg-blue-600 text-white px-2 py-1 rounded transition-colors duration-200 flex items-center">
                                                        <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                                                        </svg>
                                                        批量插入
                                                    </button>
                                                </div>
                                                <div class="flex flex-wrap gap-1 text-xs">
                                                    <span class="bg-blue-50 text-blue-700 px-2 py-1 rounded border cursor-pointer hover:bg-blue-100 transition-colors" @click="insertSubject('英语')">英语</span>
                                                    <span class="bg-blue-50 text-blue-700 px-2 py-1 rounded border cursor-pointer hover:bg-blue-100 transition-colors" @click="insertSubject('托福')">托福</span>
                                                    <span class="bg-blue-50 text-blue-700 px-2 py-1 rounded border cursor-pointer hover:bg-blue-100 transition-colors" @click="insertSubject('雅思')">雅思</span>
                                                    <span class="bg-blue-50 text-blue-700 px-2 py-1 rounded border cursor-pointer hover:bg-blue-100 transition-colors" @click="insertSubject('SAT')">SAT</span>
                                                    <span class="bg-blue-50 text-blue-700 px-2 py-1 rounded border cursor-pointer hover:bg-blue-100 transition-colors" @click="insertSubject('GRE')">GRE</span>
                                                    <span class="bg-blue-50 text-blue-700 px-2 py-1 rounded border cursor-pointer hover:bg-blue-100 transition-colors" @click="insertSubject('GMAT')">GMAT</span>
                                                    <span class="bg-blue-50 text-blue-700 px-2 py-1 rounded border cursor-pointer hover:bg-blue-100 transition-colors" @click="insertSubject('考研英语')">考研英语</span>
                                                    <span class="bg-blue-50 text-blue-700 px-2 py-1 rounded border cursor-pointer hover:bg-blue-100 transition-colors" @click="insertSubject('四六级')">四六级</span>
                                                    <span class="bg-green-50 text-green-700 px-2 py-1 rounded border cursor-pointer hover:bg-green-100 transition-colors" @click="insertSubject('少儿英语')">少儿英语</span>
                                                    <span class="bg-green-50 text-green-700 px-2 py-1 rounded border cursor-pointer hover:bg-green-100 transition-colors" @click="insertSubject('中学英语')">中学英语</span>
                                                    <span class="bg-green-50 text-green-700 px-2 py-1 rounded border cursor-pointer hover:bg-green-100 transition-colors" @click="insertSubject('小学英语')">小学英语</span>
                                                    <span class="bg-purple-50 text-purple-700 px-2 py-1 rounded border cursor-pointer hover:bg-purple-100 transition-colors" @click="insertSubject('语文')">语文</span>
                                                    <span class="bg-orange-50 text-orange-700 px-2 py-1 rounded border cursor-pointer hover:bg-orange-100 transition-colors" @click="insertSubject('数学')">数学</span>
                                                    <span class="bg-orange-50 text-orange-700 px-2 py-1 rounded border cursor-pointer hover:bg-orange-100 transition-colors" @click="insertSubject('物理')">物理</span>
                                                    <span class="bg-orange-50 text-orange-700 px-2 py-1 rounded border cursor-pointer hover:bg-orange-100 transition-colors" @click="insertSubject('化学')">化学</span>
                                                    <span class="bg-orange-50 text-orange-700 px-2 py-1 rounded border cursor-pointer hover:bg-orange-100 transition-colors" @click="insertSubject('生物')">生物</span>
                                                </div>
                                            </div>
                                            
                                            <!-- 学大教育培训学科示例 -->
                                            <div x-show="activeTab === 'xueda'" 
                                                 x-transition:enter="transition ease-out duration-200"
                                                 x-transition:enter-start="opacity-0 transform translate-y-2"
                                                 x-transition:enter-end="opacity-100 transform translate-y-0"
                                                 class="p-3 bg-white rounded-lg border border-gray-200 shadow-sm">
                                                <div class="flex items-center justify-between mb-2">
                                                    <div class="flex items-center">
                                                        <span class="text-xs font-medium text-green-600 bg-green-100 px-2 py-1 rounded-full mr-2">学大教育示例</span>
                                                        <span class="text-xs text-gray-500">个性化辅导为主</span>
                                                    </div>
                                                    <button type="button" @click="insertBatchSubjects(['小学数学','初中数学','高中数学','小学语文','初中语文','高中语文','小学英语','初中英语','高中英语','初中物理','高中物理','初中化学','高中化学','高中生物','中考冲刺','高考冲刺'])" 
                                                            class="text-xs bg-green-500 hover:bg-green-600 text-white px-2 py-1 rounded transition-colors duration-200 flex items-center">
                                                        <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                                                        </svg>
                                                        批量插入
                                                    </button>
                                                </div>
                                                <div class="flex flex-wrap gap-1 text-xs">
                                                    <span class="bg-orange-50 text-orange-700 px-2 py-1 rounded border cursor-pointer hover:bg-orange-100 transition-colors" @click="insertSubject('小学数学')">小学数学</span>
                                                    <span class="bg-orange-50 text-orange-700 px-2 py-1 rounded border cursor-pointer hover:bg-orange-100 transition-colors" @click="insertSubject('初中数学')">初中数学</span>
                                                    <span class="bg-orange-50 text-orange-700 px-2 py-1 rounded border cursor-pointer hover:bg-orange-100 transition-colors" @click="insertSubject('高中数学')">高中数学</span>
                                                    <span class="bg-purple-50 text-purple-700 px-2 py-1 rounded border cursor-pointer hover:bg-purple-100 transition-colors" @click="insertSubject('小学语文')">小学语文</span>
                                                    <span class="bg-purple-50 text-purple-700 px-2 py-1 rounded border cursor-pointer hover:bg-purple-100 transition-colors" @click="insertSubject('初中语文')">初中语文</span>
                                                    <span class="bg-purple-50 text-purple-700 px-2 py-1 rounded border cursor-pointer hover:bg-purple-100 transition-colors" @click="insertSubject('高中语文')">高中语文</span>
                                                    <span class="bg-blue-50 text-blue-700 px-2 py-1 rounded border cursor-pointer hover:bg-blue-100 transition-colors" @click="insertSubject('小学英语')">小学英语</span>
                                                    <span class="bg-blue-50 text-blue-700 px-2 py-1 rounded border cursor-pointer hover:bg-blue-100 transition-colors" @click="insertSubject('初中英语')">初中英语</span>
                                                    <span class="bg-blue-50 text-blue-700 px-2 py-1 rounded border cursor-pointer hover:bg-blue-100 transition-colors" @click="insertSubject('高中英语')">高中英语</span>
                                                    <span class="bg-red-50 text-red-700 px-2 py-1 rounded border cursor-pointer hover:bg-red-100 transition-colors" @click="insertSubject('初中物理')">初中物理</span>
                                                    <span class="bg-red-50 text-red-700 px-2 py-1 rounded border cursor-pointer hover:bg-red-100 transition-colors" @click="insertSubject('高中物理')">高中物理</span>
                                                    <span class="bg-red-50 text-red-700 px-2 py-1 rounded border cursor-pointer hover:bg-red-100 transition-colors" @click="insertSubject('初中化学')">初中化学</span>
                                                    <span class="bg-red-50 text-red-700 px-2 py-1 rounded border cursor-pointer hover:bg-red-100 transition-colors" @click="insertSubject('高中化学')">高中化学</span>
                                                    <span class="bg-teal-50 text-teal-700 px-2 py-1 rounded border cursor-pointer hover:bg-teal-100 transition-colors" @click="insertSubject('高中生物')">高中生物</span>
                                                    <span class="bg-gray-50 text-gray-700 px-2 py-1 rounded border cursor-pointer hover:bg-gray-100 transition-colors" @click="insertSubject('中考冲刺')">中考冲刺</span>
                                                    <span class="bg-gray-50 text-gray-700 px-2 py-1 rounded border cursor-pointer hover:bg-gray-100 transition-colors" @click="insertSubject('高考冲刺')">高考冲刺</span>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <!-- 学科分类示例 -->
                                        <div class="grid grid-cols-1 lg:grid-cols-4 gap-3 mb-4">
                                            <div class="bg-white p-3 rounded-lg border border-gray-200 shadow-sm">
                                                <div class="flex items-center justify-between mb-2">
                                                    <h6 class="text-xs font-semibold text-gray-600 flex items-center">
                                                        <span class="w-2 h-2 bg-blue-400 rounded-full mr-2"></span>
                                                        语言 & 考试类
                                                    </h6>
                                                    <button type="button" @click="insertBatchSubjects(['英语','日语','韩语','法语','口语','PET','考研','考公','托福','雅思','四六级'])" 
                                                            class="text-xs bg-blue-400 hover:bg-blue-500 text-white px-2 py-1 rounded transition-colors duration-200 flex items-center">
                                                        <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                                                        </svg>
                                                        批量插入
                                                    </button>
                                                </div>
                                                <div class="flex flex-wrap gap-1 text-xs">
                                                    <span class="bg-blue-50 text-blue-600 px-2 py-1 rounded cursor-pointer hover:bg-blue-100 transition-colors" @click="insertSubject('英语')">英语</span>
                                                    <span class="bg-blue-50 text-blue-600 px-2 py-1 rounded cursor-pointer hover:bg-blue-100 transition-colors" @click="insertSubject('日语')">日语</span>
                                                    <span class="bg-blue-50 text-blue-600 px-2 py-1 rounded cursor-pointer hover:bg-blue-100 transition-colors" @click="insertSubject('韩语')">韩语</span>
                                                    <span class="bg-blue-50 text-blue-600 px-2 py-1 rounded cursor-pointer hover:bg-blue-100 transition-colors" @click="insertSubject('法语')">法语</span>
                                                    <span class="bg-blue-50 text-blue-600 px-2 py-1 rounded cursor-pointer hover:bg-blue-100 transition-colors" @click="insertSubject('口语')">口语</span>
                                                    <span class="bg-blue-50 text-blue-600 px-2 py-1 rounded cursor-pointer hover:bg-blue-100 transition-colors" @click="insertSubject('PET')">PET</span>
                                                    <span class="bg-red-50 text-red-600 px-2 py-1 rounded cursor-pointer hover:bg-red-100 transition-colors" @click="insertSubject('考研')">考研</span>
                                                    <span class="bg-red-50 text-red-600 px-2 py-1 rounded cursor-pointer hover:bg-red-100 transition-colors" @click="insertSubject('考公')">考公</span>
                                                    <span class="bg-red-50 text-red-600 px-2 py-1 rounded cursor-pointer hover:bg-red-100 transition-colors" @click="insertSubject('托福')">托福</span>
                                                    <span class="bg-red-50 text-red-600 px-2 py-1 rounded cursor-pointer hover:bg-red-100 transition-colors" @click="insertSubject('雅思')">雅思</span>
                                                    <span class="bg-red-50 text-red-600 px-2 py-1 rounded cursor-pointer hover:bg-red-100 transition-colors" @click="insertSubject('四六级')">四六级</span>
                                                </div>
                                            </div>
                                            
                                            <div class="bg-white p-3 rounded-lg border border-gray-200 shadow-sm">
                                                <div class="flex items-center justify-between mb-2">
                                                    <h6 class="text-xs font-semibold text-gray-600 flex items-center">
                                                        <span class="w-2 h-2 bg-green-400 rounded-full mr-2"></span>
                                                        学科 & 辅导类
                                                    </h6>
                                                    <button type="button" @click="insertBatchSubjects(['数学','物理','化学','生物','语文','历史','地理','政治','小学辅导','高中辅导','高中复读'])" 
                                                            class="text-xs bg-green-400 hover:bg-green-500 text-white px-2 py-1 rounded transition-colors duration-200 flex items-center">
                                                        <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                                                        </svg>
                                                        批量插入
                                                    </button>
                                                </div>
                                                <div class="flex flex-wrap gap-1 text-xs">
                                                    <span class="bg-orange-50 text-orange-600 px-2 py-1 rounded cursor-pointer hover:bg-orange-100 transition-colors" @click="insertSubject('数学')">数学</span>
                                                    <span class="bg-orange-50 text-orange-600 px-2 py-1 rounded cursor-pointer hover:bg-orange-100 transition-colors" @click="insertSubject('物理')">物理</span>
                                                    <span class="bg-orange-50 text-orange-600 px-2 py-1 rounded cursor-pointer hover:bg-orange-100 transition-colors" @click="insertSubject('化学')">化学</span>
                                                    <span class="bg-orange-50 text-orange-600 px-2 py-1 rounded cursor-pointer hover:bg-orange-100 transition-colors" @click="insertSubject('生物')">生物</span>
                                                    <span class="bg-purple-50 text-purple-600 px-2 py-1 rounded cursor-pointer hover:bg-purple-100 transition-colors" @click="insertSubject('语文')">语文</span>
                                                    <span class="bg-purple-50 text-purple-600 px-2 py-1 rounded cursor-pointer hover:bg-purple-100 transition-colors" @click="insertSubject('历史')">历史</span>
                                                    <span class="bg-purple-50 text-purple-600 px-2 py-1 rounded cursor-pointer hover:bg-purple-100 transition-colors" @click="insertSubject('地理')">地理</span>
                                                    <span class="bg-purple-50 text-purple-600 px-2 py-1 rounded cursor-pointer hover:bg-purple-100 transition-colors" @click="insertSubject('政治')">政治</span>
                                                    <span class="bg-green-50 text-green-600 px-2 py-1 rounded cursor-pointer hover:bg-green-100 transition-colors" @click="insertSubject('小学辅导')">小学辅导</span>
                                                    <span class="bg-green-50 text-green-600 px-2 py-1 rounded cursor-pointer hover:bg-green-100 transition-colors" @click="insertSubject('高中辅导')">高中辅导</span>
                                                    <span class="bg-green-50 text-green-600 px-2 py-1 rounded cursor-pointer hover:bg-green-100 transition-colors" @click="insertSubject('高中复读')">高中复读</span>
                                                </div>
                                            </div>
                                            
                                            <div class="bg-white p-3 rounded-lg border border-gray-200 shadow-sm">
                                                <div class="flex items-center justify-between mb-2">
                                                    <h6 class="text-xs font-semibold text-gray-600 flex items-center">
                                                        <span class="w-2 h-2 bg-pink-400 rounded-full mr-2"></span>
                                                        特长 & 技能类
                                                    </h6>
                                                    <button type="button" @click="insertBatchSubjects(['美术','音乐','舞蹈','书法','绘画','篮球','足球','游泳','编程','机器人','会计','设计'])" 
                                                            class="text-xs bg-pink-400 hover:bg-pink-500 text-white px-2 py-1 rounded transition-colors duration-200 flex items-center">
                                                        <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                                                        </svg>
                                                        批量插入
                                                    </button>
                                                </div>
                                                <div class="flex flex-wrap gap-1 text-xs">
                                                    <span class="bg-pink-50 text-pink-600 px-2 py-1 rounded cursor-pointer hover:bg-pink-100 transition-colors" @click="insertSubject('美术')">美术</span>
                                                    <span class="bg-pink-50 text-pink-600 px-2 py-1 rounded cursor-pointer hover:bg-pink-100 transition-colors" @click="insertSubject('音乐')">音乐</span>
                                                    <span class="bg-pink-50 text-pink-600 px-2 py-1 rounded cursor-pointer hover:bg-pink-100 transition-colors" @click="insertSubject('舞蹈')">舞蹈</span>
                                                    <span class="bg-pink-50 text-pink-600 px-2 py-1 rounded cursor-pointer hover:bg-pink-100 transition-colors" @click="insertSubject('书法')">书法</span>
                                                    <span class="bg-pink-50 text-pink-600 px-2 py-1 rounded cursor-pointer hover:bg-pink-100 transition-colors" @click="insertSubject('绘画')">绘画</span>
                                                    <span class="bg-indigo-50 text-indigo-600 px-2 py-1 rounded cursor-pointer hover:bg-indigo-100 transition-colors" @click="insertSubject('篮球')">篮球</span>
                                                    <span class="bg-indigo-50 text-indigo-600 px-2 py-1 rounded cursor-pointer hover:bg-indigo-100 transition-colors" @click="insertSubject('足球')">足球</span>
                                                    <span class="bg-indigo-50 text-indigo-600 px-2 py-1 rounded cursor-pointer hover:bg-indigo-100 transition-colors" @click="insertSubject('游泳')">游泳</span>
                                                    <span class="bg-yellow-50 text-yellow-700 px-2 py-1 rounded cursor-pointer hover:bg-yellow-100 transition-colors" @click="insertSubject('编程')">编程</span>
                                                    <span class="bg-yellow-50 text-yellow-700 px-2 py-1 rounded cursor-pointer hover:bg-yellow-100 transition-colors" @click="insertSubject('机器人')">机器人</span>
                                                    <span class="bg-gray-50 text-gray-600 px-2 py-1 rounded cursor-pointer hover:bg-gray-100 transition-colors" @click="insertSubject('会计')">会计</span>
                                                    <span class="bg-gray-50 text-gray-600 px-2 py-1 rounded cursor-pointer hover:bg-gray-100 transition-colors" @click="insertSubject('设计')">设计</span>
                                                </div>
                                            </div>
                                            
                                            <div class="bg-white p-3 rounded-lg border border-gray-200 shadow-sm">
                                                <div class="flex items-center justify-between mb-2">
                                                    <h6 class="text-xs font-semibold text-gray-600 flex items-center">
                                                        <span class="w-2 h-2 bg-amber-400 rounded-full mr-2"></span>
                                                        考证 & 事业编
                                                    </h6>
                                                    <button type="button" @click="insertBatchSubjects(['教师资格证','会计师','建造师','人力资源师','普通话','事业单位','教师招聘'])" 
                                                            class="text-xs bg-amber-400 hover:bg-amber-500 text-white px-2 py-1 rounded transition-colors duration-200 flex items-center">
                                                        <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                                                        </svg>
                                                        批量插入
                                                    </button>
                                                </div>
                                                <div class="flex flex-wrap gap-1 text-xs">
                                                    <span class="bg-amber-50 text-amber-600 px-2 py-1 rounded cursor-pointer hover:bg-amber-100 transition-colors" @click="insertSubject('教师资格证')">教师资格证</span>
                                                    <span class="bg-amber-50 text-amber-600 px-2 py-1 rounded cursor-pointer hover:bg-amber-100 transition-colors" @click="insertSubject('会计师')">会计师</span>
                                                    <span class="bg-amber-50 text-amber-600 px-2 py-1 rounded cursor-pointer hover:bg-amber-100 transition-colors" @click="insertSubject('建造师')">建造师</span>
                                                    <span class="bg-amber-50 text-amber-600 px-2 py-1 rounded cursor-pointer hover:bg-amber-100 transition-colors" @click="insertSubject('人力资源师')">人力资源师</span>
                                                    <span class="bg-teal-50 text-teal-600 px-2 py-1 rounded cursor-pointer hover:bg-teal-100 transition-colors" @click="insertSubject('普通话')">普通话</span>
                                                    <span class="bg-red-50 text-red-600 px-2 py-1 rounded cursor-pointer hover:bg-red-100 transition-colors" @click="insertSubject('事业单位')">事业单位</span>
                                                    <span class="bg-red-50 text-red-600 px-2 py-1 rounded cursor-pointer hover:bg-red-100 transition-colors" @click="insertSubject('教师招聘')">教师招聘</span>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <!-- 录入建议 -->
                                        <div class="bg-amber-50 border border-amber-200 rounded-lg p-3">
                                            <div class="flex items-start">
                                                <svg class="w-4 h-4 text-amber-500 mr-2 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                                </svg>
                                                <div class="text-xs text-amber-700">
                                                    <span class="font-medium">💡 录入建议：</span>
                                                    <span class="text-amber-600">• 使用逗号分隔：英语,数学,物理,化学 • 每行一个学科：换行输入，系统自动处理 • 参考分类：可按上述分类选择适合的学科组合</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div> 
                                                          
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Form Footer -->
                    <div class="px-6 py-4 bg-gray-50 border-t border-gray-200 flex items-center justify-between">
                        <div class="flex items-center text-sm text-gray-500">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            <span>带 <span class="text-red-500">*</span> 的字段为必填项</span>
                        </div>
                        <div class="flex space-x-3">
                            <button type="button" 
                                    @click="closeModals()" 
                                    class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                取消
                            </button>
                            <button type="submit" 
                                    :disabled="saving || !isFormValid()"
                                    :class="saving || !isFormValid() ? 'opacity-50 cursor-not-allowed' : 'hover:bg-blue-700'"
                                    class="inline-flex items-center px-6 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors">
                                <svg class="w-4 h-4 mr-2 animate-spin" x-show="saving" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                                </svg>
                                <svg class="w-4 h-4 mr-2" x-show="!saving" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"></path>
                                </svg>
                                <span x-text="saving ? '保存中...' : (showCreateModal ? '创建机构' : '更新机构')"></span>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <!-- 详情模态框 -->
    <div x-show="showDetailModal" x-cloak class="fixed inset-0 z-50 overflow-y-auto">
        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" @click="closeDetailModal()"></div>
            
            <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">
                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                    <div class="mb-4">
                        <h3 class="text-lg font-medium text-gray-900">机构详情</h3>
                    </div>
                    
                    <template x-if="selectedPartner">
                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                            <!-- 基本信息 -->
                            <div class="space-y-4">
                                <h4 class="text-md font-medium text-gray-900 border-b pb-2">基本信息</h4>
                                
                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700">机构名称</label>
                                        <p class="mt-1 text-sm text-gray-900" x-text="selectedPartner.name"></p>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700">所在城市</label>
                                        <p class="mt-1 text-sm text-gray-900" x-text="selectedPartner.city"></p>
                                    </div>
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-gray-700">机构描述</label>
                                    <p class="mt-1 text-sm text-gray-900" x-text="selectedPartner.description || '暂无描述'"></p>
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-gray-700">业务科目</label>
                                    <div class="mt-1 flex flex-wrap gap-1">
                                        <template x-for="subject in (selectedPartner.subjects || [])" :key="subject">
                                            <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800" x-text="subject"></span>
                                        </template>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 联系信息 -->
                            <div class="space-y-4">
                                <h4 class="text-md font-medium text-gray-900 border-b pb-2">联系信息</h4>
                                
                                <div class="grid grid-cols-1 gap-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700">联系人</label>
                                        <p class="mt-1 text-sm text-gray-900" x-text="selectedPartner.contact_person"></p>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700">联系电话</label>
                                        <p class="mt-1 text-sm text-gray-900" x-text="selectedPartner.contact_phone"></p>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700">联系邮箱</label>
                                        <p class="mt-1 text-sm text-gray-900" x-text="selectedPartner.contact_email || '暂无'"></p>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700">Webhook URL</label>
                                        <p class="mt-1 text-sm text-gray-900 break-all" x-text="selectedPartner.webhook_url || '暂无'"></p>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 合作统计 -->
                            <div class="lg:col-span-2">
                                <h4 class="text-md font-medium text-gray-900 border-b pb-2 mb-4">合作统计</h4>
                                
                                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                                    <div class="bg-blue-50 rounded-lg p-4">
                                        <div class="text-2xl font-bold text-blue-600" x-text="selectedPartner.push_count || 0"></div>
                                        <div class="text-sm text-gray-600">总推送数</div>
                                    </div>
                                    <div class="bg-green-50 rounded-lg p-4">
                                        <div class="text-2xl font-bold text-green-600" x-text="selectedPartner.success_count || 0"></div>
                                        <div class="text-sm text-gray-600">成功推送</div>
                                    </div>
                                    <div class="bg-red-50 rounded-lg p-4">
                                        <div class="text-2xl font-bold text-red-600" x-text="(selectedPartner.push_count || 0) - (selectedPartner.success_count || 0)"></div>
                                        <div class="text-sm text-gray-600">失败推送</div>
                                    </div>
                                    <div class="bg-purple-50 rounded-lg p-4">
                                        <div class="text-2xl font-bold text-purple-600" x-text="selectedPartner.push_count > 0 ? ((selectedPartner.success_count / selectedPartner.push_count) * 100).toFixed(1) + '%' : '0%'"></div>
                                        <div class="text-sm text-gray-600">成功率</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
                
                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                    <button type="button" @click="closeDetailModal()" class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:w-auto sm:text-sm">
                        关闭
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function partnersManager() {
    return {
        // 数据
        partners: [],
        stats: {},
        cities: [],
        total: 0,
        page: 1,
        limit: 20,
        totalPages: 0,
        
        // 搜索和筛选
            searchQuery: '',
            statusFilter: '',
            cityFilter: '',
            subjectFilter: '',
            dateFilter: '',
            successRateFilter: '',
            showAdvancedFilter: false,
            
            // 视图模式和状态
            viewMode: 'table', // 'table' 或 'card'
            loading: false,
            saving: false,
            
            // 模态框
        showCreateModal: false,
        showEditModal: false,
        showDetailModal: false,
        showCancelDialog: false,
        selectedPartner: null,
        
        // 表单
        loading: false,
        originalFormData: null,
        partnerForm: {
            name: '',
            city: '',
            status: 'active',
            contact_person: '',
            phone: '',
            email: '',
            webhook_url: '',
            cities: [],
            subjects: [],
            description: ''
        },
        newCity: '',
        newSubject: '',
        commonSubjects: ['数学', '英语', '语文', '物理', '化学', '生物', '历史', '地理', '政治', '音乐', '美术', '体育', '信息技术', '通用技术', '心理健康'],
        
        // 初始化
        init() {
            const startTime = performance.now();
            
            Promise.all([
                this.loadPartners(),
                this.loadStats(),
                this.loadCities()
            ]).then(() => {
                const endTime = performance.now();
                const loadTime = endTime - startTime;
                
                // 性能监控
                if (loadTime > 2000) {
                    console.warn(`页面加载耗时 ${Math.round(loadTime)}ms，建议优化数据量或网络连接`);
                }
                
                // 显示加载完成提示
                if (this.partners.length > 100) {
                    this.showToast(`已加载 ${this.partners.length} 个机构，建议使用筛选功能提升浏览体验`, 'info');
                }
            });
            
            // 设置自动刷新（可选）
            // setInterval(() => {
            //     this.loadStats();
            // }, 30000); // 30秒刷新一次统计数据
            
            // 初始化草稿和快捷键功能
            this.loadDraft();
            this.setupKeyboardShortcuts();
        },
        
        // 刷新数据
        async refreshData() {
            this.loading = true;
            try {
                await Promise.all([
                    this.loadPartners(),
                    this.loadStats(),
                    this.loadCities()
                ]);
                showToast('数据刷新成功', 'success');
            } catch (error) {
                showToast('刷新失败', 'error');
            } finally {
                this.saving = false;
            }
        },
        
        // 加载合作机构列表
        async loadPartners() {
            try {
                this.loading = true;
                const params = new URLSearchParams({
                    page: this.page,
                    size: this.limit,
                    name: this.searchQuery,
                    status: this.statusFilter,
                    city: this.cityFilter,
                    subject: this.subjectFilter,
                    date: this.dateFilter,
                    success_rate: this.successRateFilter
                });
                
                const response = await fetch(`/api/v1/partners?${params}`);
                const data = await response.json();
                
                if (data.code === 200) {
                    this.partners = data.data || [];
                    this.total = data.total || 0;
                    this.totalPages = Math.ceil(this.total / this.limit);
                } else {
                    this.partners = [];
                    this.total = 0;
                    this.totalPages = 0;
                    showToast(data.message || '加载合作机构失败', 'error');
                }
            } catch (error) {
                this.partners = [];
                this.total = 0;
                this.totalPages = 0;
                showToast('网络错误', 'error');
            } finally {
                this.loading = false;
            }
        },
        
        // 加载统计数据
        async loadStats() {
            try {
                const response = await fetch('/api/v1/partners/stats');
                const data = await response.json();
                
                if (data.code === 200) {
                    this.stats = data.data || {};
                }
            } catch (error) {
                console.error('加载统计数据失败:', error);
            }
        },
        
        // 加载城市列表
        async loadCities() {
            try {
                const response = await fetch('/api/v1/partners/cities');
                const data = await response.json();
                
                if (data.code === 200) {
                    this.cities = data.data || [];
                }
            } catch (error) {
                console.error('加载城市列表失败:', error);
            }
        },
        
        // 搜索（已有防抖处理）
        search() {
            this.currentPage = 1;
            this.loadPartners();
        },
        
        // 数据导出
        async exportPartners() {
            try {
                const response = await fetch('/api/v1/partners/export', {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                    }
                });
                
                if (response.ok) {
                    const blob = await response.blob();
                    const url = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = `合作机构数据_${new Date().toISOString().split('T')[0]}.xlsx`;
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                    window.URL.revokeObjectURL(url);
                    this.showToast('导出成功', 'success');
                } else {
                    this.showToast('导出失败', 'error');
                }
            } catch (error) {
                this.showToast('导出失败', 'error');
            }
        },
        
        // 键盘快捷键支持
        handleKeydown(event) {
            // Ctrl/Cmd + K 打开搜索
            if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
                event.preventDefault();
                document.querySelector('input[x-model="searchQuery"]').focus();
            }
            // Ctrl/Cmd + N 新建机构
            if ((event.ctrlKey || event.metaKey) && event.key === 'n') {
                event.preventDefault();
                this.openCreateModal();
            }
            // ESC 关闭模态框
            if (event.key === 'Escape') {
                this.closeModals();
                this.closeDetailModal();
            }
        },
        
        resetFilters() {
            this.searchQuery = '';
            this.statusFilter = '';
            this.cityFilter = '';
            this.subjectFilter = '';
            this.dateFilter = '';
            this.successRateFilter = '';
            this.showAdvancedFilter = false;
            this.search();
        },
        
        // 表单验证
        isFormValid() {
            return this.partnerForm.form.name &&
                   this.partnerForm.form.name.trim() !== '' &&
                   this.partnerForm.form.city &&
                   this.partnerForm.form.city.trim() !== '';
        },
        
        // 分页
        prevPage() {
            if (this.page > 1) {
                this.page--;
                this.loadPartners();
            }
        },
        
        nextPage() {
            if (this.page < this.totalPages) {
                this.page++;
                this.loadPartners();
            }
        },
        
        goToPage(pageNum) {
            this.page = pageNum;
            this.loadPartners();
        },
        
        getPageNumbers() {
            const pages = [];
            const start = Math.max(1, this.page - 2);
            const end = Math.min(this.totalPages, this.page + 2);
            
            for (let i = start; i <= end; i++) {
                pages.push(i);
            }
            
            return pages;
        },
        
        // 表单操作
        resetForm() {
            this.partnerForm = {
                form: {
                    name: '',
                    city: '',
                    status: 'active',
                    contact_person: '',
                    phone: '',
                    email: '',
                    webhook_url: '',
                    subjects: '',
                    description: ''
                },
                cities: [],
                subjects: [],
                errors: {}
            };
            this.originalFormData = null;
            this.newCity = '';
            this.newSubject = '';
        },
        
        openCreateModal() {
            this.resetForm();
            this.showCreateModal = true;
        },
        
        // 城市管理
        addCity() {
            if (!this.newCity || !this.newCity.trim()) return;
            
            // 支持批量输入：按换行或逗号分割
            const cities = this.newCity.split(/[\n,，]/).map(c => c.trim()).filter(c => c);
            
            if (cities.length === 0) return;
            
            if (cities.length === 1) {
                // 单个城市添加
                const city = cities[0];
                if (!this.partnerForm.cities.includes(city)) {
                    this.partnerForm.cities.push(city);
                    this.newCity = '';
                }
            } else {
                // 批量城市添加
                this.insertBatchCities(cities);
                this.newCity = '';
            }
        },
        
        removeCity(city) {
            this.partnerForm.cities = this.partnerForm.cities.filter(c => c !== city);
        },
        
        // 学科管理
        insertSubject(subject) {
            if (!subject || !subject.trim()) return;
            
            const cleanSubject = subject.trim();
            const currentText = this.partnerForm.form.subjects || '';
            const existingSubjects = currentText.split(/[\n,]/).map(s => s.trim()).filter(s => s);
            
            // 检查是否已存在（忽略大小写和空格）
            const exists = existingSubjects.some(existing => 
                existing.toLowerCase().replace(/\s+/g, '') === cleanSubject.toLowerCase().replace(/\s+/g, '')
            );
            
            if (!exists) {
                if (currentText && !currentText.endsWith(',') && !currentText.endsWith('，')) {
                    this.partnerForm.form.subjects += ', ';
                } else if (currentText && (currentText.endsWith(',') || currentText.endsWith('，'))) {
                    this.partnerForm.form.subjects += ' ';
                }
                this.partnerForm.form.subjects += cleanSubject;
            }
        },
        
        insertBatchSubjects(subjects) {
            if (!Array.isArray(subjects) || subjects.length === 0) return;
            
            // 确保 subjects 是字符串类型
            let currentText = this.partnerForm.form.subjects || '';
            if (Array.isArray(currentText)) {
                currentText = currentText.join(', ');
            } else if (typeof currentText !== 'string') {
                currentText = '';
            }
            
            const existingSubjects = currentText.split(/[\n,]/).map(s => s.trim()).filter(s => s);
            const newSubjects = [];
            let skippedCount = 0;
            
            subjects.forEach(subject => {
                const cleanSubject = subject.trim();
                if (!cleanSubject) return;
                
                // 检查是否已存在（忽略大小写和空格）
                const exists = existingSubjects.some(existing => 
                    existing.toLowerCase().replace(/\s+/g, '') === cleanSubject.toLowerCase().replace(/\s+/g, '')
                ) || newSubjects.some(newSub => 
                    newSub.toLowerCase().replace(/\s+/g, '') === cleanSubject.toLowerCase().replace(/\s+/g, '')
                );
                
                if (!exists) {
                    newSubjects.push(cleanSubject);
                } else {
                    skippedCount++;
                }
            });
            
            if (newSubjects.length > 0) {
                if (currentText && !currentText.endsWith(',') && !currentText.endsWith('，')) {
                    this.partnerForm.form.subjects += ', ';
                } else if (currentText && (currentText.endsWith(',') || currentText.endsWith('，'))) {
                    this.partnerForm.form.subjects += ' ';
                }
                this.partnerForm.form.subjects += newSubjects.join(',');
                
                // 显示插入结果提示
                let message = `成功插入 ${newSubjects.length} 个学科`;
                if (skippedCount > 0) {
                    message += `，跳过 ${skippedCount} 个重复学科`;
                }
                
                // 创建临时提示元素
                const toast = document.createElement('div');
                toast.className = 'fixed top-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg z-50 transition-opacity duration-300';
                toast.textContent = message;
                document.body.appendChild(toast);
                
                // 3秒后移除提示
                setTimeout(() => {
                    toast.style.opacity = '0';
                    setTimeout(() => {
                        if (toast.parentNode) {
                            toast.parentNode.removeChild(toast);
                        }
                    }, 300);
                }, 3000);
            } else if (skippedCount > 0) {
                // 全部重复的情况
                const toast = document.createElement('div');
                toast.className = 'fixed top-4 right-4 bg-yellow-500 text-white px-4 py-2 rounded-lg shadow-lg z-50 transition-opacity duration-300';
                toast.textContent = `所有学科都已存在，跳过 ${skippedCount} 个重复学科`;
                document.body.appendChild(toast);
                
                setTimeout(() => {
                    toast.style.opacity = '0';
                    setTimeout(() => {
                        if (toast.parentNode) {
                            toast.parentNode.removeChild(toast);
                        }
                    }, 300);
                }, 3000);
            }
        },
        
        // 批量插入城市
        insertBatchCities(cities) {
            if (!Array.isArray(cities) || cities.length === 0) return;
            
            const existingCities = this.partnerForm.cities || [];
            const newCities = [];
            let skippedCount = 0;
            
            cities.forEach(city => {
                const cleanCity = city.trim();
                if (!cleanCity) return;
                
                // 检查是否已存在（忽略大小写和空格）
                const exists = existingCities.some(existing => 
                    existing.toLowerCase().replace(/\s+/g, '') === cleanCity.toLowerCase().replace(/\s+/g, '')
                ) || newCities.some(newCity => 
                    newCity.toLowerCase().replace(/\s+/g, '') === cleanCity.toLowerCase().replace(/\s+/g, '')
                );
                
                if (!exists) {
                    newCities.push(cleanCity);
                } else {
                    skippedCount++;
                }
            });
            
            if (newCities.length > 0) {
                this.partnerForm.cities.push(...newCities);
                
                // 显示插入结果提示
                let message = `成功添加 ${newCities.length} 个城市`;
                if (skippedCount > 0) {
                    message += `，跳过 ${skippedCount} 个重复城市`;
                }
                
                this.showToast(message, 'success');
            } else if (skippedCount > 0) {
                // 全部重复的情况
                this.showToast(`所有城市都已存在，跳过 ${skippedCount} 个重复城市`, 'warning');
            }
        },
        
        // 城市相关函数
        insertCityText(cityText) {
            if (!cityText || !cityText.trim()) return;
            
            // 支持批量插入：按逗号分割
            const cities = cityText.split(/[,，]/).map(c => c.trim()).filter(c => c);
            
            if (cities.length === 1) {
                // 单个城市插入到 city 字段
                const cleanCity = cities[0];
                const currentText = this.partnerForm.form.city || '';
                const existingCities = currentText.split(/[,，]/).map(c => c.trim()).filter(c => c);
                
                // 检查是否已存在（忽略大小写和空格）
                const exists = existingCities.some(existing => 
                    existing.toLowerCase().replace(/\s+/g, '') === cleanCity.toLowerCase().replace(/\s+/g, '')
                );
                
                if (!exists) {
                    if (currentText && !currentText.endsWith(',') && !currentText.endsWith('，')) {
                        this.partnerForm.form.city += '，';
                    }
                    this.partnerForm.form.city += cleanCity;
                }
            } else {
                // 批量城市插入到 cities 数组
                this.insertBatchCities(cities);
            }
        },
        
        // 自动保存草稿
        saveDraft() {
            try {
                const draftData = {
                    ...this.partnerForm,
                    timestamp: Date.now()
                };
                localStorage.setItem('partner_form_draft', JSON.stringify(draftData));
            } catch (error) {
                console.warn('无法保存草稿:', error);
            }
        },
        
        // 加载草稿
        loadDraft() {
            try {
                const draftData = localStorage.getItem('partner_form_draft');
                if (draftData) {
                    const draft = JSON.parse(draftData);
                    // 检查草稿是否过期（24小时）
                    if (Date.now() - draft.timestamp < 24 * 60 * 60 * 1000) {
                        this.partnerForm = { ...this.partnerForm, ...draft };
                        delete this.partnerForm.timestamp;
                    } else {
                        this.clearDraft();
                    }
                }
            } catch (error) {
                console.warn('无法加载草稿:', error);
            }
        },
        
        // 清除草稿
        clearDraft() {
            try {
                localStorage.removeItem('partner_form_draft');
            } catch (error) {
                console.warn('无法清除草稿:', error);
            }
        },
        
        // 设置键盘快捷键
        setupKeyboardShortcuts() {
            document.addEventListener('keydown', (e) => {
                // 只在编辑模态框打开时响应快捷键
                if (!this.showEditModal && !this.showCreateModal) return;
                
                // Ctrl+S 保存
                if (e.ctrlKey && e.key === 's') {
                    e.preventDefault();
                    this.savePartner();
                }
                // Esc 取消
                if (e.key === 'Escape') {
                    this.handleCancel();
                }
            });
        },
        
        // 取消编辑确认
        handleCancel() {
            let hasChanges = false;
            
            if (this.showCreateModal) {
                // 创建模式：检查是否有任何内容
                hasChanges = this.partnerForm.form.name ||
                            this.partnerForm.form.city ||
                            this.partnerForm.form.contact_person ||
                            this.partnerForm.form.phone ||
                            this.partnerForm.form.email ||
                            this.partnerForm.form.webhook_url ||
                            this.partnerForm.form.subjects ||
                            this.partnerForm.form.description;
            } else if (this.showEditModal && this.originalFormData) {
                // 编辑模式：比较当前值与原始值
                hasChanges = this.partnerForm.form.name !== this.originalFormData.name ||
                            this.partnerForm.form.city !== this.originalFormData.city ||
                            this.partnerForm.form.contact_person !== this.originalFormData.contact_person ||
                            this.partnerForm.form.phone !== this.originalFormData.phone ||
                            this.partnerForm.form.email !== this.originalFormData.email ||
                            this.partnerForm.form.webhook_url !== this.originalFormData.webhook_url ||
                            this.partnerForm.form.subjects !== this.originalFormData.subjects ||
                            this.partnerForm.form.description !== this.originalFormData.description;
            }
            
            if (hasChanges) {
                this.showCancelDialog = true;
            } else {
                this.closeModals();
            }
        },
        
        confirmLeave() {
            this.clearDraft();
            this.showCancelDialog = false;
            this.closeModals();
        },
        
        confirmCancel() {
            this.clearDraft();
            this.showCancelDialog = false;
            this.closeModals();
        },
        
        cancelCancel() {
            this.showCancelDialog = false;
        },
        
        // 模态框操作
        closeModals() {
            this.showCreateModal = false;
            this.showEditModal = false;
            this.resetForm();
        },
        
        closeDetailModal() {
            this.showDetailModal = false;
            this.selectedPartner = null;
        },
        
        // CRUD操作
        async savePartner() {
            // 表单验证
            if (!this.isFormValid()) {
                this.showToast('请填写所有必填字段', 'error');
                return;
            }
            
            this.saving = true;
            
            try {
                const url = this.showCreateModal ? '/api/v1/partners' : `/api/v1/partners/${this.partnerForm.id}`;
                const method = this.showCreateModal ? 'POST' : 'PUT';
                
                // 准备提交数据，确保字段名称正确
                // 将学科文本转换为数组格式
                let subjectsText = this.partnerForm.form.subjects || '';
                if (Array.isArray(subjectsText)) {
                    subjectsText = subjectsText.join(', ');
                } else if (typeof subjectsText !== 'string') {
                    subjectsText = '';
                }
                const subjectsArray = subjectsText ? subjectsText.split(/[\n,]/).map(s => s.trim()).filter(s => s) : [];
                
                const submitData = {
                    name: this.partnerForm.form.name,
                    type: this.partnerForm.form.type || 'education',
                    city: this.partnerForm.form.city,
                    contact: this.partnerForm.form.contact_person,
                    phone: this.partnerForm.form.phone,
                    email: this.partnerForm.form.email,
                    address: this.partnerForm.form.address || '',
                    webhook_url: this.partnerForm.form.webhook_url,
                    api_key: this.partnerForm.form.api_key || '',
                    priority: this.partnerForm.form.priority || 1,
                    status: this.partnerForm.form.status,
                    description: this.partnerForm.form.description,
                    // 将学科数组转换为逗号分隔的字符串
                    subjects: subjectsArray.join(',')
                };
                
                // 移除 cities 字段，因为后端不需要
                delete submitData.cities;
                
                const response = await fetch(url, {
                    method: method,
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(submitData)
                });
                
                const data = await response.json();
                
                if (data.code === 200) {
                    showToast(this.showCreateModal ? '创建成功' : '更新成功', 'success');
                    this.clearDraft(); // 清除草稿
                    this.closeModals();
                    this.loadPartners();
                    this.loadStats();
                } else {
                    showToast(data.message || '操作失败', 'error');
                }
            } catch (error) {
                showToast('网络错误', 'error');
            } finally {
                this.saving = false;
            }
        },
        
        // 表单验证
        validateForm() {
            if (!this.partnerForm.form.name.trim()) {
                showToast('请输入机构名称', 'error');
                return false;
            }
            
            if (!this.partnerForm.form.city.trim()) {
                showToast('请输入所在城市', 'error');
                return false;
            }
            
            // 联系人和联系电话为可选字段，但如果填写了电话需要验证格式
            if (this.partnerForm.form.phone.trim()) {
                const phoneRegex = /^1[3-9]\d{9}$|^0\d{2,3}-?\d{7,8}$|^400-?\d{3}-?\d{4}$/;
                if (!phoneRegex.test(this.partnerForm.form.phone.replace(/\s+/g, ''))) {
                    showToast('请输入正确的电话号码', 'error');
                    return false;
                }
            }
            
            // 验证邮箱格式（如果填写了）
            if (this.partnerForm.form.email && this.partnerForm.form.email.trim()) {
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!emailRegex.test(this.partnerForm.form.email)) {
                    showToast('请输入正确的邮箱地址', 'error');
                    return false;
                }
            }
            
            return true;
        },
        
        editPartner(partner) {
            // 确保 subjects 和 cities 始终是数组
            let subjects = partner.subjects || [];
            if (typeof subjects === 'string') {
                subjects = subjects ? subjects.split(',').map(s => s.trim()).filter(s => s) : [];
            }
            
            let cities = partner.cities || [];
            if (typeof cities === 'string') {
                cities = cities ? cities.split(',').map(c => c.trim()).filter(c => c) : [];
            }
            
            // 将学科数组转换为文本格式
            const subjectsText = Array.isArray(subjects) ? subjects.join(',') : (subjects || '');
            
            this.partnerForm = {
                id: partner.id,
                form: {
                    name: partner.name || '',
                    city: partner.city || '',
                    status: partner.status || 'active',
                    contact_person: partner.contact_person || '',
                    phone: partner.phone || partner.contact_phone || '',
                    email: partner.email || partner.contact_email || '',
                    webhook_url: partner.webhook_url || '',
                    subjects: subjectsText,
                    description: partner.description || ''
                },
                cities: cities,
                subjects: subjects,
                errors: {}
            };
            
            // 保存原始表单数据用于比较
            this.originalFormData = {
                name: partner.name || '',
                city: partner.city || '',
                status: partner.status || 'active',
                contact_person: partner.contact_person || '',
                phone: partner.phone || partner.contact_phone || '',
                email: partner.email || partner.contact_email || '',
                webhook_url: partner.webhook_url || '',
                subjects: subjectsText,
                description: partner.description || ''
            };
            
            this.showEditModal = true;
        },
        
        viewPartner(partner) {
            this.selectedPartner = partner;
            this.showDetailModal = true;
        },
        
        async toggleStatus(partner) {
            const newStatus = partner.status === 'active' ? 'inactive' : 'active';
            const action = newStatus === 'active' ? '启用' : '停用';
            
            if (!confirm(`确定要${action}该机构吗？`)) {
                return;
            }
            
            try {
                const response = await fetch(`/api/v1/partners/${partner.id}/status`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ status: newStatus })
                });
                
                const data = await response.json();
                
                if (data.code === 200) {
                    showToast(`${action}成功`, 'success');
                    this.loadPartners();
                    this.loadStats();
                } else {
                    showToast(data.message || `${action}失败`, 'error');
                }
            } catch (error) {
                showToast('网络错误', 'error');
            }
        },
        
        async deletePartner(partner) {
            if (!confirm(`确定要删除机构"${partner.name}"吗？此操作不可恢复。`)) {
                return;
            }
            
            try {
                const response = await fetch(`/api/v1/partners/${partner.id}`, {
                    method: 'DELETE'
                });
                
                const data = await response.json();
                
                if (data.code === 200) {
                    showToast('删除成功', 'success');
                    this.loadPartners();
                    this.loadStats();
                } else {
                    showToast(data.message || '删除失败', 'error');
                }
            } catch (error) {
                showToast('网络错误', 'error');
            }
        },
        
        // 其他操作
        pushToPartner(partner) {
            // 跳转到推送页面，预选该机构
            window.location.href = `/push?partner_id=${partner.id}`;
        },
        
        async exportPartners() {
            try {
                const params = new URLSearchParams({
                    name: this.searchQuery,
                    status: this.statusFilter,
                    city: this.cityFilter
                });
                
                const response = await fetch(`/api/v1/partners/export?${params}`);
                
                if (response.ok) {
                    const blob = await response.blob();
                    const url = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = `partners_${new Date().toISOString().split('T')[0]}.xlsx`;
                    document.body.appendChild(a);
                    a.click();
                    window.URL.revokeObjectURL(url);
                    document.body.removeChild(a);
                    
                    showToast('导出成功', 'success');
                } else {
                    showToast('导出失败', 'error');
                }
            } catch (error) {
                showToast('网络错误', 'error');
            }
        },
        
        // 工具函数
        formatDate(dateString) {
            if (!dateString) return '-';
            const date = new Date(dateString);
            return date.toLocaleDateString('zh-CN');
        },
        
        showToast(message, type = 'info') {
            if (window.showToast) {
                window.showToast(message, type);
            } else {
                // 备用提示方式
                alert(message);
            }
        }
    }
}
</script>
{{end}}